<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        div{
            width: 300px;
            height: 300px;

            /*margin不会导致元素本身尺寸的变化*/
            margin: 50px auto;
            background-color: orange;

            /*padding默认情况下,会导致元素实际尺寸变大*/
            padding:50px;

            /*border默认情况下,也会导致元素尺寸变大*/
            border:50px solid red;

            /*
                outline是外边框线,是围绕在border之外的的一个边框线.
                outline不会导致元素的实际区域变大,它只是浮在元素周围的一个边框线
            */
            outline: 60px dotted blue;

            /*以上的默认情况指的是默认的元素盒模型:cotent-box*/
            /*还有另外一种盒模型:border-box*/
        }

        section{
            width: 300px;
            height: 300px;
            background: orange;

            /*
            对于margin来讲,默认情况下外边距会合并.并且取最大的哪一个.
            margin相当于距离其他模块元素真身的距离
            */
            margin: 50px auto;
            /*
            修改盒模型为border-box.默认是content-box
            开发的时候,经常会修改盒模型来保证元素布局的准确性,
            并且border-box也是最常用的盒模型样式.
            */
            box-sizing: border-box;

            /*border-box设置padding不会导致元素实际尺寸变大,但是会挤压内容区*/
            padding: 50px;

            /*border-box设置border也不会导致元素实际尺寸变大,但是也会挤压内容区*/
            border: 50px solid red;

        }

    </style>

</head>
<body>
    <div>
        Content-Box
    </div>

    <section>
        Border-Box
    </section>
</body>
</html>